<html layout:decorate="~{alarm/alarm_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content_alarm">
    <style>
        .modal-dialog {
            width: 800px !important;
        }
    </style>
    <div class="search_condition_block">

        <div style="margin-top: 5px">
            <label style="width: 80px;margin-left: 15px">时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:</label>
            <div id="time" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active" id="today">今天</button>
                <button type="button" class="btn btn-success" id="yesterday">昨天</button>
                <button type="button" class="btn btn-success" id="week">本周</button>
                <button type="button" class="btn btn-success" id="month">本月</button>
                <button type="button" class="btn btn-success">自定义</button>
            </div>
            <!--<input type="text" class="search-data-child" name="name" placeholder="" >-->
            <input type="text" class="search-data-child" name="name" placeholder="搜索设备名称" style="margin-left: 10px">
            <button type="button" id="search-btn" class="btn btn-primary btn-sm" style="margin-left: 10px">搜索</button>
        </div>

        <div style="margin-top: 5px">
            <label style="width: 80px;margin-left: 15px">报警等级:</label>
            <div id="grade" class="btn-group btn-group-sm" role="toolbar" aria-label="...">
                <button type="button" class="btn btn-success active">所有</button>
                <button type="button" class="btn btn-success">四级</button>
                <button type="button" class="btn btn-success">三级</button>
                <button type="button" class="btn btn-success">二级</button>
                <button type="button" class="btn btn-success">一级</button>
            </div>

            <label style="width: 80px;margin-left: 15px">报警状态:</label>
                 <div id="status" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active">全部</button>
                <button type="button" class="btn btn-success">未确认</button>
                <button type="button" class="btn btn-success">已确认未处理</button>
                <button type="button" class="btn btn-success">已处理</button>
                <button type="button" class="btn btn-success">已作废</button>
            </div>

            <label style="width: 80px;margin-left: 15px">报警来源:</label>
            <div id="source" class="btn-group btn-group-sm" role="group" aria-label="...">
                <button type="button" class="btn btn-success active">所有</button>
                <button type="button" class="btn btn-success">BMS</button>
                <button type="button" class="btn btn-success">PCS</button>
                <button type="button" class="btn btn-success">诊断</button>
            </div>
        </div>
    </div>

    <div class="main-body">
        <table id="dataTable" data-url="alarm_data" data-page-list=[] data-striped="true" data-pagination="true"
               data-page-size="15" data-cache="false">

        </table>
    </div>

    <style>
        .btn-group-sm .active {
            background-color: #006dcc !important;
            border-color: #006dcc !important;
        }
    </style>
    <script>
        $('#time button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#grade button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#status button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $('#source button').click(function (e) {
            $(this).addClass('active').siblings().removeClass('active');
        });
        //条件按钮
        $("#today").click(function (){

            var url = "alarm_today"
            $("#dataTable").attr("data_url",url);
            var dataUrl= $("#dataTable").attr("data_url");
            /*  $.ajax({
                  method: "GET",
                  url : dataUrl,//"alarm_today"
                  dataType:"json",

                  }

           });*/
        });
        //table字段
        var dataFormat = [{
            field: 'id',
            title: 'id',
            visible: false
        }, {
            field: 'startTime',
            title: '开始时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'endTime',
            title: '结束时间',
            align: 'center',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'name',
            title: '报警设备',
            align: 'center'
        }, {
            field: 'content',
            title: '报警内容',
            align: 'center'
        }, {
            field: 'grade',
            align: 'center',
            title: '报警等级'
        }, {
            field: 'source',
            align: 'center',
            title: '来源'
        }, {
            field: 'eventLog',
            align: 'center',
            title: '事件记录(SOE)',
            formatter: formatEventLog
        }, {
            field: 'treatmentSuggestion',
            align: 'center',
            title: '建议处理意见'
        }, {
            field: 'status',
            align: 'center',
            title: '状态'
        }, {
            field: 'operation',
            align: 'center',
            title: '操作',
            formatter: formatOperate
        }, {
            field: 'details',
            align: 'center',
            title: '操作详情',
            formatter: formatDetails
        }];

        function formatEventLog(value, row, index) {
            return ['<a onclick="showDetail(' + row.id + ')">详细</a>'].join('');
        }

        function formatOperate() {

            var status = 3//根据状态获取相应的操作

            if (status == 1) {
                return ['<button type="button" class="btn btn-danger btn-xs"><rem style="color: #1D2024">处理</rem></button>']
            }
            else if (status == 2) {
                return ['<button type="button" class="btn btn-warning btn-xs"><rem style="color: #1D2024">警告</rem></button>']
            }
            else {
                return ['<button type="button" class="btn btn-success btn-xs"><rem style="color: #1D2024">作废</rem></button>']
            }
        }

        function formatDetails(value, row, index) {
            /*点击按钮通过操作方式回显操作详情(确认:回显当前时间,处理:回显处理意见,作废:直接删除)*/

        }

        function showDetail(id) {

            var url = "/alarm/event_detail";
            if (id) {
                url += "?id=" + id;
            }

            $("#modal").modal({
                remote: url
            });
        }

        //初始化table
        window.onload = function () {
            getTable(dataFormat, "dataTable");
        };

        /* function getTable (dataFormat,id) {
             $("#"+id).bootstrapTable({
                 method:"get",
                 sidePagination:"server",
                 dataType: "json",
                 toolbar: '#toolbar',
                 queryParams: function queryParams(params) {   //设置查询参数
                     var param = {
                         pageNum: params.offset/params.limit
                     };
                     $(".search-data").each(function () {
                         var key = $(this).attr("name");
                         var val = $(this).val();
                         param[key] = val;
                     });
                     console.log(param);
                     return param;
                 },
                 columns:dataFormat
             });
         }*/
    </script>
</div>
</body>
</html>